<template xmlns="http://www.w3.org/1999/html"><!--申请补卡-->
  <el-scrollbar height="650px">
    <div class="big-div">
      <el-form-item class="el-form-item01">
        <el-icon size="40px"><ElemeFilled /></el-icon><span01>流程：</span01>

        <el-button type="primary" style="margin-left: 900px">提交</el-button>
        <el-button type="primary">保存</el-button>
      </el-form-item>
      <div class="div01" >
        安排面试流程
      </div>
      <div style="width: 1160px;padding:0px 40px 10px 0px;margin:auto;margin-top: 10px;background: white">
        <div style="width: 100%;height:50px;border-bottom:1px solid rgb(220, 223, 230);line-height: 50px">
          <div style="height: 30px;width: 5px;margin: 10px 0px 0px 20px;background-color:#118dea;float: left;"></div><span style="margin-left: 10px;">基础信息</span>
        </div>
        <el-form
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :inline="true" :model="form" label-width="205px" style="margin: 20px 0px 0px 0px">
          <el-form-item label="流程标题">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="紧急程度" prop="resource">
            <el-radio-group v-model="form.flow">
              <el-radio label="Sponsorship" />
              <el-radio label="Venue" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="面试负责人">
            <el-input v-model="form.username" />
          </el-form-item>
          <el-form-item label="岗位">
            <el-input v-model="form.post" />
          </el-form-item>
          <el-form-item label="申请日期">
            <el-form-item prop="date" style="float: left">
              <el-date-picker
                  v-model="form.date"
                  type="date"
                  label="Pick a date"
                  placeholder="Pick a date"
                  style="width: 300px"
              />
            </el-form-item>
          </el-form-item>
          <el-form-item label="申请时间" style="">
            <el-form-item prop="date2">
              <el-time-picker
                  v-model="form.date2"
                  label="Pick a time"
                  placeholder="Pick a time"
                  style="width: 300px;"
              />
            </el-form-item>
          </el-form-item>
          <el-form-item label="安排面试日期" style="float: left">

            <el-form-item prop="date3">
              <el-date-picker
                  v-model="form.date3"
                  type="date"
                  label="Pick a date"
                  placeholder="Pick a date"
                  style="width: 300px"
              />
            </el-form-item>
          </el-form-item>
          <el-form-item label="安排面试时间" >
            <el-form-item prop="date4">
              <el-time-picker
                  v-model="form.date4"
                  label="Pick a time"
                  placeholder="Pick a time"
                  style="width: 300px"
              />
            </el-form-item>
          </el-form-item>
          <el-form-item label="面试形式" prop="region" style="float: left;">
            <el-select v-model="form.region" placeholder="Activity zone" style="width: 300px;">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="面试阶段" prop="region">
            <el-select v-model="form.region" placeholder="Activity zone" style="width: 300px;">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>

          <el-form-item label="说明" prop="desc">
            <el-input v-model="form.desc" type="textarea" style="width: 890px"/>
          </el-form-item>
        </el-form>
      </div>
      <div style="width: 1160px;padding:0px 40px 10px 0px;margin:auto;margin-top: 10px;background: white">
        <div style="width: 100%;height:50px;border-bottom:1px solid rgb(220, 223, 230);line-height: 50px">
          <div style="height: 30px;width: 5px;margin: 10px 0px 0px 20px;background-color:#118dea;float: left;"></div><span style="margin-left: 10px;">面试人信息</span>
        </div>
        <el-form
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :inline="true" :model="form" label-width="205px" style="margin: 20px 0px 0px 0px">
          <el-form-item label="候选人姓名" prop="region" style="float: left">
            <el-select v-model="form.region" placeholder="Activity zone" style="width: 300px;">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="候选人简历" prop="region">
            <el-select v-model="form.region" placeholder="Activity zone" style="width: 300px;">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="性别" prop="region" style="float: left">
            <el-select v-model="form.region" placeholder="Activity zone" style="width: 300px;">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="学历" prop="region">
            <el-select v-model="form.region" placeholder="Activity zone" style="width: 300px;">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="安排面试日期" style="float: left">

            <el-form-item prop="date3">
              <el-date-picker
                  v-model="form.date"
                  type="date"
                  label="Pick a date"
                  placeholder="Pick a date"
                  style="width: 300px"
              />
            </el-form-item>
          </el-form-item>
          <el-form-item label="工作经验" prop="region" >
            <el-select v-model="form.region" placeholder="Activity zone" style="width: 300px;">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="电话" prop="name" style="float: left">
            <el-input v-model="form.name" style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="邮箱" prop="name">
            <el-input v-model="form.name" style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="相关附件">
            <el-upload
                ref="upload"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                :limit="1"
                :on-exceed="handleExceed"
                :auto-upload="false"
            >
              <template #trigger>
                <el-button type="primary">选择文件</el-button>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div style="width: 1160px;padding:0px 40px 10px 0px;margin:auto;margin-top: 10px;background: white">
        <div style="width: 100%;height:50px;border-bottom:1px solid rgb(220, 223, 230);line-height: 50px">
          <div style="height: 30px;width: 5px;margin: 10px 0px 0px 20px;background-color:#118dea;float: left;"></div><span style="margin-left: 10px;">HR记录</span>
        </div>
        <el-form
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :inline="true" :model="form" label-width="205px" style="margin: 20px 0px 0px 0px">
          <el-form-item label="是否参加面试" prop="region" style="float: left">
            <el-select v-model="form.region" placeholder="Activity zone" style="width: 300px;">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="面试形式" prop="region">
            <el-select v-model="form.region" placeholder="Activity zone" style="width: 300px;">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="面试结果" prop="region" style="float: left">
            <el-select v-model="form.region" placeholder="Activity zone" style="width: 300px;">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="面试阶段" prop="region">
            <el-select v-model="form.region" placeholder="Activity zone" style="width: 300px;">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="实际面试日期" style="float: left;">

            <el-form-item prop="date3">
              <el-date-picker
                  v-model="form.date"
                  type="date"
                  label="Pick a date"
                  placeholder="Pick a date"
                  style="width: 300px"
              />
            </el-form-item>
          </el-form-item>

        </el-form>
      </div>
      <!--    费用事项-->
      <!--      <div style="width: 1200px;margin:auto;margin-top: 10px;background: white">-->
      <!--        <div style="width: 100%;height:50px;border-bottom:1px solid rgb(220, 223, 230);line-height: 50px">-->
      <!--          <div style="height: 30px;width: 5px;margin: 10px 0px 0px 20px;background-color:#118dea;float: left;"></div><span style="margin-left: 10px;">招聘要求</span>-->
      <!--        </div>-->
      <!--        <div style="padding: 20px;display: flex;justify-content: center">-->
      <!--          <el-form label-width="100px">-->

      <!--          </el-form>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
//文件上传
const upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
const input = ref('')
const form = reactive({
  name: 'cjl补卡申请2022.10.07',
  username:'cjl',
  dept:'认识',
  date:'NEW DATE',
  flow:'overtime3456789',
  post:'员工',
  post2:'员工',
  number:'2',
  reason:'哈哈哈哈',
  source:'来源',
  responsibility:'职责'

})

import dayjs from 'dayjs'

const now = new Date()

const tableData = reactive({
  type:'',
  startTime:'',
  endTime:'',
  desc:''
})

</script>


<style scoped>
.el-form--inline .el-form-item{
  margin-right: 0px;
}
body{
  background: #F4F4F4;
}
.big-div{
  /*display:flex;*/
  /*justify-content: center;*/
  flex-wrap: wrap;
  width: 100%;
  background: #F4F4F4;
  margin:0 auto;
}
.el-form-item01{
  height: 80px;
  background: white;
}
.el-input{
  width: 300px;
}
.div01{
  margin:auto;
  text-align:center;
  line-height: 70px;
  width: 1200px;
  height: 80px;
  margin-top: 20px;
  background: white;
  font-size: 30px;
}

</style>